<template>
	<layout>
		<uv-sticky bg-color="#F5F5F5" offset-top="0" customNavHeight="0">
			<uv-navbar :fixed="false" :safeAreaInsetTop="true" height="0" bgColor="transparent" leftIcon="" />
			<!-- #ifndef MP -->
			<!-- <blank size="10"></blank> -->
			<!-- #endif -->
		</uv-sticky>

		<blank size="10"></blank>
		<view class="container">
			<view class="banner">
				<view class="drop-down">
					<uv-drop-down ref="dropDown" sign="dropDown_1" :defaultValue="defaultValue" :extra-icon="{
              name: 'arrow-down-fill',
              color: '#666',
              size: '26rpx',
            }" :extra-active-icon="{
              name: 'arrow-up-fill',
              color: '#3c9cff',
              size: '26rpx',
            }" @click="selectMenu">
						<uv-drop-down-item name="order" type="2" :label="dropItem('order').tenantName"
							:value="dropItem('order').tenantId">
						</uv-drop-down-item>

						<uv-drop-down-item name="type" type="2" :label="dropItem('type').tenantName"
							:value="dropItem('type').tenantId">
						</uv-drop-down-item>
						<!-- 传统能耗 -->
						<template v-if="currentModelId == 5">
							<uv-drop-down-item name="traditionSystem" type="2" :label="activeTraditionName"
								:value="activeTraditionValue">
							</uv-drop-down-item>
						</template>
					</uv-drop-down>
					<template v-if="activeName"></template>
					<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" key-name="tenantName"
						:currentDropItem="currentDropItem" @clickItem="clickItem" @popupChange="change">
					</uv-drop-down-popup>
				</view>
			</view>
			<view class="content">
				<view class="flex justify-between yshop-menu" v-if="navList && navList.length > 0">
					<view class="flex flex-column align-center yshop-menu-item" v-for="item in navList" :key="item.id"
						@click="takein(item)">
						<view class="nav-img">
							<image :src="item.icon" mode="aspectFit" class="img-01"></image>
						</view>
						<view class="nav-title">{{ item.name }}</view>
					</view>
				</view>
				<view class="entrance">
					<uv-tabs :list="tabList" lineWidth="60" :current="currentTab" @click="tabClick"
						itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;"></uv-tabs>
				</view>
				<view class="module-content">
					<!-- 概况 -->
					<template v-if="activeTab == globalConfig.tabName.overView">
						<component v-for="(item, index) in componentList" :key="item.id" :is="item.component"
							:list="overviewList" :modelData="componentData[index]"
							:activeTraditionId="activeTraditionId" :parkId="currentParkId"></component>
					</template>
					<!-- 工单 -->
					<template v-if="activeTab == globalConfig.tabName.order">
						<OrderAnalysis></OrderAnalysis>
					</template>
					<!-- 设备 -->
					<template v-if="activeTab == globalConfig.tabName.device">
						<component v-for="(item, index) in componentList" :key="index" :is="item.component"></component>
					</template>

					<!-- 排名 -->
					<template v-if="activeTab == globalConfig.tabName.ranking">
						<component v-for="(item, index) in componentList" :key="index" :is="item.component"
							:list="rankingData" :title="item.name" :moduleId="currentModelId"
							:activeTraditionId="activeTraditionId">
						</component>
						<!-- <Ranking></Ranking> -->
						<!-- <PowerRanking></PowerRanking> -->
					</template>
				</view>
			</view>
		</view>
	</layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		shallowRef,
		watch,
		ref,
		nextTick
	} from "vue";
	import {
		switchTenant
	} from "@/api/system";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import storge from "@/utils/cookie";
	import {
		menuAds
	} from "@/api/market";
	import globalConfig from "@/utils/constant.js";
	import {
		storeToRefs
	} from "pinia";
	import {
		useMainStore
	} from "@/store/store";
	import Overview from "@/pages/components/module/overview/overview.vue";
	import EnercySave from "@/pages/components/module/energySave/energySave.vue";
	import PowerPlan from "@/pages/components/module/powerPlan/PowerPlan.vue";
	import OrderAnalysis from "@/pages/components/module/orderAnalysis/OrderAnalysis.vue";
	import Ranking from "@/pages/components/module/ranking/Ranking.vue";
	import PowerRanking from "@/pages/components/module/powerRanking/PowerRanking.vue";
	import StationDistribution from "@/pages/components/module/stationDistribution/stationDistribution.vue";
	import DeviceStatus from "@/pages/components/module/deviceStatus/DeviceStatus.vue";
	import * as testApi from "@/api/model/test";
	import * as totalApi from "@/api/model/parkTotal";
	import * as chargeApi from "@/api/model/chargingStation";
	import * as lightApi from "@/api/model/photovoltaic";
	import * as traditionApi from "@/api/model/trandition";
	import {
		Switch
	} from "vant";
	const main = useMainStore();
	const {
		member,
		store,
		isLogin
	} = storeToRefs(main);

	const isActiveModule = shallowRef(Overview);
	//const store = ref(main.store)
	const navList = ref([]); //导航列表
	const componentData = ref([]); //用来存储接口返回的数据
	const listAds = ref([]);
	const overviewList = ref([]); //概况数组
	const activeTab = ref("概况");
	let componentList = ref([]);
	const currentTab = ref(0);
	// const isLogin = ref(main.isLogin)
	// 表示value等于这些值，就属于默认值
	const defaultValue = ref([0, 5]);
	const currentModelId = ref(null); //当前模块ID
	const currentParkId = ref(null); //当前园区ID
	const activeTraditionName = ref(""); //当前选中传统能耗系统name
	let activeTraditionId = ref("");
	const activeTraditionValue = ref(""); //当前选中传统能耗系统value
	const rankingData = ref([{
			position: 1,
			powerstationName: "南京华信大道",
			normalization: "30.27",
		},
		{
			position: 2,
			powerstationName: "吴经中学",
			normalization: "25.24",
		},
		{
			position: 3,
			powerstationName: "小长兴",
			normalization: "17.48",
		},
		{
			position: 4,
			powerstationName: "天津长春",
			normalization: "15.28",
		},
	]); //排名数据
	// 筛选结果
	const result = ref([{
			name: "order",
			tenantName: "振华重工(总)",
			value: "all",
		},
		{
			name: "type",
			tenantName: "园区总览",
			value: 7,
		},
		{
			name: "traditionSystem",
			tenantName: "系统",
			value: 7,
		},
	]);
	const tabList = ref([{
			name: "概况",
		},
		{
			name: "工单",
		},
		{
			name: "设备",
		},
		{
			name: "排名",
		},
	]);
	const navTitle = ref("");
	const activeName = ref("type"); //默认模块
	const data = reactive({
		order: {
			tenantName: "振华重工(总)",
			value: "order",
			activeIndex: 0,
			color: "#333",
			activeColor: "#2878ff",
			child: [{
				tenantName: "园区1",
				value: "all",
			}, ],
		},
		type: {
			tenantName: "模块11",
			value: "type",
			activeIndex: 0,
			color: "#333",
			activeColor: "#2878ff",
			child: [{
					tenantName: "模块1",
					value: "all1",
				},
				{
					tenantName: "模块2",
					value: "pdf",
				},
			],
		},

		traditionSystem: {
			tenantName: "系统1",
			value: "traditionSystem",
			activeIndex: 0,
			color: "#333",
			activeColor: "#2878ff",
			child: [{
				tenantName: "电系统",
				value: "ele",
			}, ],
		},
	});
	const change = () => {};
	//获取园区下拉框数据
	const getTenantList = () => {
		let modelId = JSON.parse(storge.get("zh-h5-select-park")); //
		let res = storge.get("zh-h5-userInfo");
		data.order.child = res.tenantList;
		let tenantList = res.tenantList;
		//园区默认第一项
		result.value[0].tenantName = tenantList[0].tenantName;
		result.value[0].value = tenantList[0].tenantId;
		// console.log("菜单列表", res)
		let arr = globalConfig.allModelList.map((item) => {
			return {
				tenantName: item.modelName,
				tenantId: item.id,
			};
		});
		data.type.child = arr;
		//根据nav页面选中的项进行回写
		let checkModel = arr.filter((item) => item.tenantId == modelId);

		//模块默认第一项
		result.value[1].tenantName = checkModel[0].tenantName;
		result.value[1].value = checkModel[0].tenantId;
		// console.log("checkModel===", checkModel)
		clickItem(checkModel[0]);

		data.traditionSystem.child = [{
				tenantName: "水系统1",
				tenantId: "water",
			},
			{
				tenantName: "电系统1",
				tenantId: "ele",
			},
			{
				tenantName: "燃气系统1",
				tenantId: "gas",
			},
			{
				tenantName: "重能耗",
				tenantId: "heavy",
			},
			{
				tenantName: "其他能耗",
				tenantId: "other",
			},
		];

		result.value[2].tenantName = data.traditionSystem.child[0].tenantName;
		result.value[2].value = data.traditionSystem.child[0].tenantId;
	};

	const tabClick = (item) => {
		// console.log("选中-item", item);
		currentTab.value = item.index;
		activeTab.value = item.name;
		componentList.value = item.children;
	};
	/**
	 * 点击每个筛选项回调
	 * @param {Object} e { name, active, type } = e
	 */
	const selectMenu = (e) => {
		const {
			name,
			active,
			type
		} = e;
		// console.log("选中菜单", name, active, type, currentDropItem)
		activeName.value = name;
		// type 等于1 的需要特殊处理：type不等于1可以忽略
		if (type == 1) {
			clickItem({
				name: "vip_type",
				tenantName: "VIP文档",
				value: e.active ? 1 : 0,
			});
		} else if ((type == 2 && name == "type") || type == "order") {
			const find = result.value.find((item) => item.name == activeName.value);
			if (find) {
				const findIndex = data[activeName.value].child.findIndex(
					(item) =>
					item.tenantName == find.tenantName && item.tenantId == find.value
				);
				// console.log("findIndex===", find, findIndex)
				data[activeName.value].activeIndex = findIndex;
			} else {
				data[activeName.value].activeIndex = 0;
			}
		} else if (type == 2 && name == "traditionSystem") {
			// console.log("传统系统能耗")
		}
	};

	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	const clickItem = async (e) => {
		console.log("点击菜单", e, activeName.value);
		// 下面有重新赋值，所以用let
		let {
			tenantName,
			tenantId
		} = e;

		activeTraditionName.value = tenantName;

		if (tenantId == 5 || activeName.value == "traditionSystem") {
			//传统能源 预览动态调整
			activeTraditionId.value =
				tenantId == 5 ? data.traditionSystem.child[0].tenantId : tenantId;
			overviewList.value = globalConfig.tradtionOverviewMap[e.tenantId];
			filterComponent(activeTraditionId.value);
			requestById(
				currentParkId.value,
				currentModelId.value,
				activeTraditionId.value
			);
		}
		pageChangeById(tenantName, tenantId);
	};
	//过滤其他用途占比
	const filterComponent = (val) => {
		let list = componentList.value;
		if (val == "other") {
			componentList.value = componentList.value.filter(
				(item) => item.name != "用途占比"
			);
		}
	};
	//刷新页面
	const refreshPage = () => {
		requestById(
			currentParkId.value,
			currentModelId.value,
			activeTraditionId.value
		);
	};
	const pageChangeById = async (tenantName, tenantId) => {
		if (activeName.value == "type") {
			// 模块
			// console.log("选中模块菜单", tenantName, tenantId)
			currentModelId.value = tenantId;
			uni.setStorageSync("zh-h5-select-module", tenantId); //

			overviewByModel();
		} else if (activeName.value == "order") {
			//order 园区
			// console.log("选中园区菜单", tenantName, tenantId)
			currentParkId.value = tenantId;
			uni.setStorageSync("zh-h5-select-park", JSON.stringify(tenantId)); //
			let {
				data
			} = await switchTenant(tenantId); //切换园区重新获取token
			storge.set("zh-h5-project-token", data.data.token); //刷新token
			refreshPage();
		}
		showModelByModel(); //根据模块展示模型
		let obj = {
			name: tabList.value[0].name,
			children: tabList.value[0].children,
		}; //默认先展示第一个
		// console.log("xxh参数", obj)
		tabClick(obj); //xxh
		navList.value = navByModelId(currentParkId.value, currentModelId.value); //根据园区和模块获取对应导航列表
		// console.log("导航列表", arr)
		requestById(
			currentParkId.value,
			currentModelId.value,
			activeTraditionId.value
		); //根据园区和模块ID 来触发对应接口
		const findIndex = result.value.findIndex(
			(item) => item.name == activeName.value
		);
		if (defaultValue.value.indexOf(tenantId) > -1 && data.order.tenantName) {
			tenantName = data.order.tenantName;
		}
		// 已经存在筛选项
		if (findIndex > -1) {
			result.value[findIndex] = {
				name: activeName.value,
				tenantName,
				value: tenantId,
			};
		} else {
			result.value.push({
				name: activeName.value,
				tenantName,
				value: tenantId,
			});
		}
		result.value = result.value.filter(
			(item) => defaultValue.value.indexOf(item.value) == -1
		);
	};
	const dropItem = computed((name) => {
		return (name) => {
			const result1 = {};
			const find = result.value.find((item) => item.name === name);
			if (find) {
				result1.tenantName = find.tenantName;
				result1.value = find.value;
			} else {
				result1.tenantName = data[name].tenantName;
				result1.value = data[name].value;
			}
			return result1;
		};
	});
	// 获取当前下拉筛选项
	const currentDropItem = computed(() => {
		// console.log("currentName==", data[activeName.value], activeName.value)
		return data[activeName.value];
	});
	//根据园区ID 和模块id 调用相应请求
	const requestById = async (parkId, modelId, traditionId) => {
		let requests = null;
		if (modelId == 7) {
			//园区总揽
			requests = totalApi.apiArr.map((item, index) => {
				return totalApi[item.value]()
					.then((data) => {
						componentData.value[index] = data.data; // 更新对应的索引数据
						if (item.value == "reqHeadData") {
							overviewValueByModel(data.data.data); //根据模块给相对应的概况赋值
						}
					})
					.catch((error) => {
						componentData.value[index] = {}; // 请求失败时，返回空数据
					});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 4) {
			//充电桩
			requests = chargeApi.apiArr.map((item, index) => {
				return chargeApi[item.value]()
					.then((data) => {
						componentData.value[index] = data.data; // 更新对应的索引数据
					})
					.catch((error) => {
						componentData.value[index] = {}; // 请求失败时，返回空数据
					});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 2) {
			//光伏
			requests = lightApi.apiArr.map((item, index) => {
				return lightApi[item.value]()
					.then((data) => {
						componentData.value[index] = data.data; // 更新对应的索引数据
						if (item.value == "reqsituation") {
							lightOverviewByModel(data.data.data); //根据模块给相对应的概况赋值
						}
					})
					.catch((error) => {
						componentData.value[index] = {}; // 请求失败时，返回空数据
					});
			});
			await Promise.all(requests); // 等待所有请求完成
		} else if (modelId == 5) {
			//传统能耗
			traditionOverviewByModel(traditionId);
			// requests = traditionApi.apiArr.map((item, index) => {
			// 	return traditionApi[item.value]().then((data) => {
			// 		componentData.value[index] = data.data; // 更新对应的索引数据
			// 		traditionOverviewByModel(data.data.data, traditionId)

			// 	}).catch((error) => {
			// 		componentData.value[index] = {}; // 请求失败时，返回空数据
			// 	});
			// });
			// await Promise.all(requests); // 等待所有请求完成
		}
	};
	const traditionOverviewByModel = (traditionId) => {
		let isLoading = false; // 控制是否正在加载数据

		let viewData = null;
		let map = {
			water: "reqTradtionWaterView",
			ele: "reqTradtionEleView",
			gas: "reqTradtionGasView",
			heavy: "reqTradtionWeightView",
			other: "reqTradtionOtherView",
		};
		traditionApi[map[traditionId]]().then((res) => {
			viewData = res.data.data;
			let titleToKeyMap = globalConfig.traditionViewMap[traditionId];
			// 根据 `title` 顺序赋值
			overviewList.value.forEach((item) => {
				const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
				if (key && viewData[key]) {
					item.value = viewData[key]; // 将 `dataValues` 中的值赋给 `value`
				}
			});
		});
	};
	//根据模块给相对应的概况赋值(总数据看板/分数据看板)
	const overviewValueByModel = (val) => {
		const titleToKeyMap = {
			"上月综合能耗等价值/当量值(吨标煤)": "one",
			"上月消耗总价(万元)": "two",
			"当年综合消耗等价值/当量值(吨标煤)": "three",
			"当年消耗总价(万元)": "four",
			"单位产量能耗(吨标煤/吨钢结构)": "five",
			"当年二氧化碳排放总量(tCO₂)": "six",
		};

		// 根据 `title` 顺序赋值
		overviewList.value.forEach((item) => {
			const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
			if (key && val[key]) {
				item.value = val[key]; // 将 `dataValues` 中的值赋给 `value`
			}
		});
	};
	//根据模块给相对应的概况赋值(光伏)
	const lightOverviewByModel = (val) => {
		const titleToKeyMap = {
			"当前总功率(kW)": "powergenerationCapacity",
			"总装机容量(kWp)": "installedCapacity",
			"当日发电量(MWh)": "dailyPowergeneration",
			"当月发电量(MWh)": "monthlyPowergeneration",
			"当年发电量(MWh)": "annualPowergeneration",
			"累计发电量(GWh)": "cumulativePowergeneration",
		};

		// 根据 `title` 顺序赋值
		overviewList.value.forEach((item) => {
			const key = titleToKeyMap[item.title]; // 获取对应的 `dataValues` 键
			if (key || val[key]) {
				item.value = val[key]; // 将 `dataValues` 中的值赋给 `value`
			}
		});
	};

	/**
	 * 根据
	 */
	const navByModelId = (parkId, modelId) => {
		let arr = globalConfig.modelMapNav[modelId];
		return arr;
	};
	const handGetListAds = async () => {
		let shop_id = store.id ? store.id : 0;
		let data = await menuAds({
			shop_id: shop_id,
		});
		if (data) {
			listAds.value = data.list;
			// console.log('listAds:', listAds.value)
			uni.setStorage({
				key: "isActive",
				data: data.isActive,
			});
			if (data.list.length > 0) {
				uni.setStorage({
					key: "shopAd",
					data: data.list[0].image,
				});
			}
		}
	};
	//nav导航点击事件
	const takein = (item) => {
		// console.log("点击项", item)
		let {
			name
		} = item;
		switch (name) {
			case "电站管理":
				uni.navigateTo({
					url: "/pages/components/pages/station/station",
				});
				break;

			case "告警管理":
				uni.navigateTo({
					url: "/pages/components/pages/alarm/alarm",
					success: (res) => {
						res.eventChannel.emit("getModelId", {
							modelId: currentModelId.value,
							traditionId: activeTraditionId.value,
						});
					},
				});
				break;

			case "监控管理":
				uni.navigateTo({
					url: "/pages/components/pages/monitor/monitor",
					success: (res) => {
						res.eventChannel.emit("getModelId", {
							data: currentModelId.value,
						});
					},
				});
				break;
			case "运维管理":
				uni.navigateTo({
					url: "/pages/components/pages/yunwei/operate",
					success: (res) => {
						res.eventChannel.emit("getModelId", {
							modelId: currentModelId.value,
							traditionId: activeTraditionId.value,
						});
					},
				});
				break;
			case "订单管理":
				uni.navigateTo({
					url: "/pages/components/pages/orders/orders",
				});
				break;

			case "配额管理":
				uni.navigateTo({
					url: "/pages/components/pages/quotaManage/quotaManage",
				});
				break;

			case "资产管理":
				uni.navigateTo({
					url: "/pages/components/pages/assetManage/AssetManage",
				});
				break;

			case "交易管理":
				uni.navigateTo({
					url: "/pages/components/pages/transaction/Transaction",
				});
				break;
		}
	};

	const takeout = () => {
		main.SET_ORDER_TYPE("takeout");
		uni.switchTab({
			url: "/pages/menu/menu",
		});
	};

	const goScore = () => {
		uni.navigateTo({
			url: "/pages/components/pages/scoreproduct/list",
		});
	};
	//根据选择模块返回对应数据
	const overviewByModel = () => {
		let selectModelId = uni.getStorageSync("zh-h5-select-module");

		let res = globalConfig.modelMap[selectModelId];
		overviewList.value = res;

		// console.log("返回的数组", res)
	};
	const showModelByModel = () => {
		let selectModelId = uni.getStorageSync("zh-h5-select-module");
		let selectParkId = uni.getStorageSync("zh-h5-select-park");

		if (selectModelId == 7 && selectParkId == 71) {
			//总揽《总数据看板》
			let res = globalConfig.showModelMap[selectModelId][0];

			tabList.value = res;
		} else if (selectModelId == 7 && selectParkId != 71) {
			//总揽《分数据看板》
			let res = globalConfig.showModelMap[selectModelId][1];
			tabList.value = res;
		} else {
			let res = globalConfig.showModelMap[selectModelId];
			tabList.value = res;
		}
	};

	watch(
		() => componentList.value,
		(newList) => {
			if (activeTraditionId.value == "other") {
				componentList.value = componentList.value.filter(
					(item) => item.name != "用途占比"
				);
			}
		}, {
			immediate: true,
			deep: true,
		}
	);
	watch(
		() => activeTraditionId.value,
		(val) => {
			console.log("activeTraditionId 更新为:", val);
		}
	);
	onLoad(() => {
		// console.log("选中的模块ID", uni.getStorageSync('zh-h5-select-module'))
		overviewByModel();
		// getTenantList();
		showModelByModel();

		// handGetListAds()
	});

	onShow(() => {
		// console.log("show==")
		nextTick(() => {
			getTenantList();
		});
	});
</script>

<style lang="scss">
	.yshop-menu {
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		/* 子元素之间有间距 */
		align-items: stretch;
		/* 子元素高度等于父元素的高度 */
		width: 100%;
		/* 父元素宽度占满父容器 */
		height: 174rpx;
		/* 设置父元素的高度 */
		gap: 10px;
	}

	.yshop-menu-item {
		background-color: #ffffff;
		// width: 160rpx;
		// padding-bottom: 8rpx;
		flex: 1 1 0;
		/* 子元素等比例缩小 */
		// background-color: lightblue;
		height: 100%;
		/* 子元素高度占满父元素 */

		/* 可选，用于查看子元素边界 */

		.nav-img {
			margin-bottom: 8rpx;
			padding-bottom: 0.25rem;
			flex: 1 1 0;
			// background-color: lightblue;
			height: 100%;
			margin: 5px;
			width: 100%;
			text-align: center;

			.img-01 {
				// width: 100px;
				// height: 100rpx;
				// margin-top: 30rpx;
				width: 100%;
				/* 图片宽度占满子元素 */
				height: 100%;
				max-width: 100px;
				max-height: 100rpx;
				/* 图片高度占满子元素 */
				object-fit: contain;
				/* 保持图片的比例，且不超过子元素 */
				object-position: center;
			}
		}

		.nav-title {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.index-img {
		width: 120px;
		height: 120rpx;
		position: relative;
		left: -20rpx;
	}

	.img-01 {
		// width: 100px;
		// height: 100rpx;
		// margin-top: 30rpx;
		width: 100%;
		/* 图片宽度占满子元素 */
		height: 100%;
		max-width: 100px;
		max-height: 100rpx;
		/* 图片高度占满子元素 */
		object-fit: contain;
		/* 保持图片的比例，且不超过子元素 */
		object-position: center;
	}

	.img-02 {
		width: 110px;
		height: 110rpx;
		margin-top: 20rpx;
	}

	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	page {
		background-color: #f0f1f4 !important;
	}

	.banner {
		// position: relative;
		// width: 100%;
		// //height: 300rpx;
		height: 60rpx;

		.test {
			display: flex;
			justify-content: space-between;
			/* 子元素之间有间距 */
			align-items: stretch;
			/* 子元素高度等于父元素的高度 */
			width: 100%;
			/* 父元素宽度占满父容器 */
			height: 300px;
			/* 设置父元素的高度 */
			gap: 10px;
			/* 子元素之间的间距 */
			border: 2px solid black;

			/* 可选，用于查看父元素边界 */
			.child {
				flex: 1 1 0;
				/* 子元素等比例缩小 */
				background-color: lightblue;
				height: 100%;
				/* 子元素高度占满父元素 */
				margin: 5px;
				/* 子元素之间的间距 */
				border: 1px solid red;
				/* 可选，用于查看子元素边界 */

				.img-01 {
					width: 100%;
					/* 图片宽度占满子元素 */
					height: 100%;
					max-width: 100px;
					max-height: 100rpx;
					/* 图片高度占满子元素 */
					object-fit: contain;
					/* 保持图片的比例，且不超过子元素 */
					object-position: center;
					/* 图片居中显示 */
				}
			}
		}

		.bg {
			width: 100%;
			height: 300rpx;
		}

		.intro {
			position: absolute;
			top: calc(50rpx + var(--status-bar-height));
			left: 40rpx;
			color: #ffffff;
			display: flex;
			flex-direction: column;

			.greet {
				font-size: $font-size-lg;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: $font-size-sm;
			}
		}
	}

	.drop-down {
		position: fixed;
		height: 60rpx;
		width: 100%;
		top: 0;
		background-color: #f0f0f0;
		z-index: 9;
	}

	.content {
		padding: 0 10rpx;
	}

	.entrance {
		position: relative;
		//top:0;
		margin-top: 10rpx;
		// margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		// padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-radius: 50rpx;

		.item {
			//flex: 1;
			display: flex;
			//flex-direction: column;
			justify-content: center;
			//align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: "";
				position: absolute;
				width: 1rpx;
				background-color: #ddd;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}

			.icon {
				font-size: 90rpx;
				// color: #5A5B5C;
				color: #09b4f1;
			}

			.title {
				font-size: 30rpx;
				color: $text-color-base;
				font-weight: 600;
			}
		}
	}

	.module-content {
		.module1-container {
			margin-top: 0;
		}
	}

	.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		//padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				display: flex;
				align-items: center;

				.title {
					color: $text-color-base;
					font-size: $font-size-base;
					margin-right: 10rpx;
				}

				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;
			}
		}

		.qrcode_section {
			color: $color-primary;
			display: flex;
			//flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>